<template>
  <div class="wrapper border-box">
    <!-- 分类导航 -->
    <div class="sidebar border-box flex ju-ce ai-st">
      <div class="noticePanel border-box flex flex-wrap ju-ce ai-st">
        <div class="bg"></div>
        <div class="avatar">
          <img src="@/assets/images/avatar-01.jpg" alt="">

          <div class="tagBar">
            <!-- :style="tagsAnime(i+1)" -->
            <v-tag :class="`tags-${i + 1}`" :style="tagsAnime(i + 1)" :color="setTagsAttr(i + 1)"
              v-for="(item,i) in userTag" :key="i">{{ item.tagCName }}</v-tag>
          </div>

          <div class="nickName m-t-lg relative">
            <!-- 拉弥亚鱼干 -->
            <v-badge status="processing">
              <span>拉弥亚鱼干</span>
            </v-badge>
          </div>

          <div class="flex font-24 jc-st border-box p-lr-sm p-tb-lg">
            <v-badge style="width: 26%;" class="flex-1" :overflow-count="99" :count="16"
              :count-style="{ 'background-color': 'yellowgreen' }">
              <span class="text">文章</span>
            </v-badge>
            <v-badge style="width: 26%;" class="flex-1" :overflow-count="99" :count="1"
              :count-style="{ 'background-color': 'yellowgreen' }">
              <span class="text">相册</span>
            </v-badge>
            <v-badge style="width: 26%;" class="flex-1" :overflow-count="99" :count="9"
              :count-style="{ 'background-color': 'yellowgreen' }">
              <span class="text">评论</span>
            </v-badge>
          </div>
          <div class="flex font-24 jc-st border-box p-lr-sm p-tb-lg">
            <v-badge style="width: 26%;" class="flex-1" :overflow-count="99" :count="2"
              :count-style="{ 'background-color': 'yellowgreen' }">
              <span class="text">动态</span>
            </v-badge>
            <v-badge style="width: 26%;" class="flex-1" :overflow-count="99" :count="99"
              :count-style="{ 'background-color': 'yellowgreen' }">
              <span class="text">嘤乐</span>
            </v-badge>
            <v-badge style="width: 26%;" class="flex-1" :overflow-count="99" :count="1"
              :count-style="{ 'background-color': 'yellowgreen' }">
              <span class="text">计划</span>
            </v-badge>
          </div>


          <!-- <div class="links-of-author">
            <span class="links-of-author-item">
              <a href="#" target="_blank" title="B站">
                <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
                  <path
                    d="M777.514667 131.669333a53.333333 53.333333 0 0 1 0 75.434667L728.746667 255.829333h49.92A160 160 0 0 1 938.666667 415.872v320a160 160 0 0 1-160 160H245.333333A160 160 0 0 1 85.333333 735.872v-320a160 160 0 0 1 160-160h49.749334L246.4 207.146667a53.333333 53.333333 0 1 1 75.392-75.434667l113.152 113.152c3.370667 3.370667 6.186667 7.04 8.448 10.965333h137.088c2.261333-3.925333 5.12-7.68 8.490667-11.008l113.109333-113.152a53.333333 53.333333 0 0 1 75.434667 0z m1.152 231.253334H245.333333a53.333333 53.333333 0 0 0-53.205333 49.365333l-0.128 4.010667v320c0 28.117333 21.76 51.157333 49.365333 53.162666l3.968 0.170667h533.333334a53.333333 53.333333 0 0 0 53.205333-49.365333l0.128-3.968v-320c0-29.44-23.893333-53.333333-53.333333-53.333334z m-426.666667 106.666666c29.44 0 53.333333 23.893333 53.333333 53.333334v53.333333a53.333333 53.333333 0 1 1-106.666666 0v-53.333333c0-29.44 23.893333-53.333333 53.333333-53.333334z m320 0c29.44 0 53.333333 23.893333 53.333333 53.333334v53.333333a53.333333 53.333333 0 1 1-106.666666 0v-53.333333c0-29.44 23.893333-53.333333 53.333333-53.333334z"
                    p-id="8684" fill="#1296db"></path>
                </svg>
              </a>
            </span>

            <span class="links-of-author-item">
              <a href="#" target="_blank" title="Steam" style="color: #212529;">
                <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
                  <path
                    d="M1008 512c0 274-222.4 496-496.8 496-227.6 0-419.2-152.6-478-360.8l190.4 78.6c12.8 64.2 69.8 112.8 137.8 112.8 78.4 0 143.8-64.8 140.4-147l169-120.4c104.2 2.6 191.6-81.8 191.6-187 0-103.2-84-187-187.4-187s-187.4 84-187.4 187v2.4L369.2 558c-31-1.8-61.4 6.8-87 24.2L16 472.2C36.4 216.8 250.2 16 511.2 16 785.6 16 1008 238 1008 512zM327.4 768.6l-61-25.2a105.58 105.58 0 0 0 54.4 51.6c53.8 22.4 115.6-3.2 138-56.8 10.8-26 11-54.6 0.2-80.6-10.8-26-31-46.4-57-57.2-25.8-10.8-53.4-10.4-77.8-1.2l63 26c39.6 16.4 58.4 61.8 41.8 101.4-16.6 39.8-62 58.4-101.6 42z m347.6-259.8c-68.8 0-124.8-56-124.8-124.6s56-124.6 124.8-124.6 124.8 56 124.8 124.6-55.8 124.6-124.8 124.6z m0.2-31.2c51.8 0 93.8-42 93.8-93.6 0-51.8-42-93.6-93.8-93.6s-93.8 42-93.8 93.6c0.2 51.6 42.2 93.6 93.8 93.6z"
                    fill="" p-id="7237"></path>
                </svg>
              </a>
            </span>

            <span class="links-of-author-item">
              <a href="#" target="_blank" title="github">
                <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
                  <path
                    d="M512 85.333333C276.266667 85.333333 85.333333 276.266667 85.333333 512a426.410667 426.410667 0 0 0 291.754667 404.821333c21.333333 3.712 29.312-9.088 29.312-20.309333 0-10.112-0.554667-43.690667-0.554667-79.445333-107.178667 19.754667-134.912-26.112-143.445333-50.133334-4.821333-12.288-25.6-50.133333-43.733333-60.288-14.933333-7.978667-36.266667-27.733333-0.554667-28.245333 33.621333-0.554667 57.6 30.933333 65.621333 43.733333 38.4 64.512 99.754667 46.378667 124.245334 35.2 3.754667-27.733333 14.933333-46.378667 27.221333-57.045333-94.933333-10.666667-194.133333-47.488-194.133333-210.688 0-46.421333 16.512-84.778667 43.733333-114.688-4.266667-10.666667-19.2-54.4 4.266667-113.066667 0 0 35.712-11.178667 117.333333 43.776a395.946667 395.946667 0 0 1 106.666667-14.421333c36.266667 0 72.533333 4.778667 106.666666 14.378667 81.578667-55.466667 117.333333-43.690667 117.333334-43.690667 23.466667 58.666667 8.533333 102.4 4.266666 113.066667 27.178667 29.866667 43.733333 67.712 43.733334 114.645333 0 163.754667-99.712 200.021333-194.645334 210.688 15.445333 13.312 28.8 38.912 28.8 78.933333 0 57.045333-0.554667 102.912-0.554666 117.333334 0 11.178667 8.021333 24.490667 29.354666 20.224A427.349333 427.349333 0 0 0 938.666667 512c0-235.733333-190.933333-426.666667-426.666667-426.666667z"
                    fill="#000000" p-id="6454"></path>
                </svg>
              </a>
            </span>
          </div> -->

        </div>
        <div class="musicWrapper">
          <!-- <aplayer @playerAttr="catchPlayerAttr"></aplayer> -->
          <div class="musicFixed" :class="!showTipsbox ? '' : 'hidden'">
            <weather></weather>

            <keep-alive>
              <cloudmusicbox></cloudmusicbox>
            </keep-alive>
            <!-- <div class="settingBar m-t-lg">
              <div class="litsItem">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-xingququan"></use>
                </svg>
                <span>兴趣</span>
              </div>
              <div class="litsItem">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-gerenxinxi"></use>
                </svg>
                <span>资料卡</span>
              </div>
              <div class="litsItem">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-shezhi1"></use>
                </svg>
                <span>设置</span>
              </div>
            </div>
            <div class="m-t-lg">
              联系我:tokukanya116@gmail.com
              <span class="w-100 block">
                🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀🍀
              </span>
            </div> -->
          </div>
        </div>

      </div>
      <!-- 个人介绍与链接:设置 -->
      <!-- 音乐盒外联 -->
      <!-- 更多功能 -->
    </div>
    <!-- 时间线留言板区 -->
    <!-- <div class="wrapperTalk">
      留言板
    </div> -->
  </div>
</template>

<script>
// import { defineComponent } from '@vue/composition-api'
// import aplayer from '@/components/aplayer';
import weather from '@/components/weather';
import cloudmusicbox from '@/components/cloudMusicBox/cloudmusic';
// import aplayer from '@/components/aplayer'
import { RandomNum, NotRepeat } from '@/utils/random';
export default {
  components: {
    // aplayer,
    cloudmusicbox,
    weather
  },
  data() {
    return {
      // 默认分类
      showTipsbox: false,
      userTag: [
        {
          tagCName: "开黑喊我",
        },
        {
          tagCName: "越共探头",
        },
        {
          tagCName: "前端搬砖",
        },
        {
          tagCName: "十年LSP",
        },
        {
          tagCName: "中二病",
        },
        {
          tagCName: "孤独美食家",
        },
      ],
      noticeLink: [
        {
          icon: "https://gitee.com/static/images/logo_themecolor.png",
          link: "https://gitee.com/tokukanya116"
        },
      ],
      color: [
        "pink-inverse", "red-inverse", "orange-inverse", "yellow-inverse", "green-inverse", "cyan-inverse", "blue-inverse", "purple-inverse"
      ],
      timer: null,
      randomNum: [],
    }
  },
  mounted() {
    this.randomNum = NotRepeat(5, 16, 6)
    // console.log(arr)
  },
  methods: {
    // 改变tags的属性
    setTagsAttr(current) {
      return this.color[Math.floor(Math.random() * this.color.length)]
    },
    // tags动画(标签生成时初始位置)
    tagsAnime(current) {
      if (current % 2 == 0) {
        return `right:${this.randomNum[current - 1]}% !important;`
      }
      return `left:${this.randomNum[current - 1]}% !important;`
    },
    catchPlayerAttr(value) {
      // console.log(value)
      this.showTipsbox = value
    }
  },
}
</script>


<style lang="scss" scoped>
.wrapper {
  width: 28%;
  height: 100%;
  background-color: #fff;
  padding: 0 10px;
  margin-left: 14px;

  .sidebar {
    width: 100%;
    height: 100%;
    font-size: 18px;

    // background-color: yellowgreen;
    .noticePanel {
      display: flex;
      border-radius: 6px;
      width: 100%;
      height: 500px;

      // overflow: hidden;
      // padding: 10px;
      // background-color: yellowgreen;
      .bg {
        width: 100%;
        height: 208px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url("../assets/images/bg-lamia.png");
        // border-radius: 6px;
      }

      .avatar {
        width: 100%;
        height: 292px;
        // z-index: 1;
        position: relative;
        border-bottom: 2px dashed #97dffd;

        img {
          position: absolute;
          top: 0;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 122px;
          height: 122px;
          border: rgba(255, 255, 255, .4) 4px solid;
          border-radius: 50%;
          transition: all .3s;
          cursor: pointer;
          z-index: 99;
        }

        img:hover {
          transform: translate(-50%, -50%) scale(1.3) rotate(360deg);
        }

        .tagBar {
          // z-index: 99;
          width: 100%;
          height: 90px;
          padding: 10px;
          position: relative;

          @each $current,
          $type in(1:left, 2:right, 3:left, 4:right, 5:left, 6:right) {

            // $position:5%;
            .tags-#{$current} {
              // animation:floating 3s linear 2s infinite;
              // -moz-animation:floating 3s linear 2s infinite; /* Firefox */
              // -webkit-animation:floating 3s linear 2s infinite; /* Safari and Chrome */
              // -o-animation:floating 3s linear 2s infinite; /* Opera */
              position: absolute;
              animation: anime-float 3s infinite;
              animation-timing-function: linear;
              animation-direction: alternate;
              opacity: 0;
              #{$type}: 5% !important;

              @if $current ==3 {
                top: 40px !important;
              }

              @if $current ==4 {
                top: 40px !important;
              }

              @if $current ==5 {
                top: 70px !important;
              }

              @if $current ==6 {
                top: 70px !important;
              }
            }

            @keyframes anime-float {
              0% {
                transform: translateX(12%);
                opacity: 0.6;
              }

              25% {
                transform: translateX(-6%);
                opacity: 1;
              }

              50% {
                transform: translate(12%, 5%);
                opacity: 1;
              }

              75% {
                transform: translate(-6%, -10%);
                opacity: 0.5;
              }

              100% {
                transform: translate(12%, -20%);
                opacity: 0;
              }
            }

          }


        }

        .nickName {
          // color: ;
          font-weight: bold;
          font-size: 22px;

          ::v-deep .ant-badge-status-processing {
            position: absolute !important;
            right: -6px !important;
            border-radius: 100%;
          }

          margin-bottom: 20px;
        }

        .text {
          width: 80%;
          font-family: 黑体;
          // font-weight: bold;
          // height: 60px;
          cursor: pointer;
          display: inline-block;
        }

        .links-of-author {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          align-items: flex-end;
          margin-top: 18px;
          padding: 10px 5px;
          height: 80px;

          .links-of-author-item {
            // margin: 5px 4px 0;
            border-radius: 50%;
            width: 62px;
            height: 62px;
            display: flex;
            justify-content: center;
            box-sizing: border-box;
            padding: 10px;
            align-items: center;

            &:hover {
              background: #97dffd;
            }

            .icon {
              font-size: 44px !important;
            }
          }
        }

      }

      .musicWrapper {
        width: 100%;

        // background-color: yellowgreen;
        .musicFixed {
          width: 100%;
          height: 430px;
          flex-wrap: wrap;
        }

        .settingBar {
          width: 100%;
          background-color: #fff;
          display: flex;
          align-items: center;

          .litsItem {
            height: 36px;
            line-height: 36px;
            cursor: pointer;
            transition: .3s all;
            flex: 1;

            .icon {
              font-size: 36px;
            }

            &:hover {
              transform: translateY(-8px);
            }
          }
        }
      }
    }

    .icon {
      font-size: 36px;
    }
  }
}
</style>